<template>
    <div>
        <div v-if="list.length > 0">
            <div class="task" v-for="(item, index) in list" :key="index" >
                <div class="cont" @click="toUrl(item.id,item.rec_id)">
                    <div class="ava">
                        <img
                                v-if="item.pushAvatar"
                                :src="item.pushAvatar"
                                class="img-ava"
                        /><img
                            v-else
                            src="~@/assets/list/person.png"
                            class="img-ava"
                    />
                    </div>

                    <div>
                        <div class="title">
                            {{item.title}}
                        </div>
                        <div class="desc">
                            {{item.synopsis}}
                        </div>
                        <div class="user-dete">
                            <div class="user">
                                <img src="~@/assets/list/person.png" class="u-img" />
                                <div class="n1">{{item.pushName}}</div>
                            </div>

                            <div class="date" v-if="item.end_time">
                                <img src="~@/assets/list/time.png" class="u-img" />
                                <div class="str">{{item.end_time}}</div>
                            </div>
                            <div class="date" v-if="item.type == 2">
                                <img src="~@/assets/list/integral.png" class="u-img" />
                                <div class="inte">{{item.integral}}积分</div>
                            </div>
                            <div class="date" v-if="item.type == 1">
                                <img src="~@/assets/list/integral.png" class="u-img" />
                                <div class="inte">{{item.money}}现金</div>
                            </div>
                        </div>
                        <div class="jd-user">
                            <div class="n5">接单人：{{item.meetName}}</div>
                        </div>
                    </div>
                </div>
                <div class="dfx" v-if="type == 2">
                    <div class="lq" @click="addTask(item.rec_id,index)">通过</div>
                    <div class="bh" @click="reject(item.rec_id,index)">驳回</div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="list-none">
                <div class="list-img">
                    <img src="~@/assets/list/list-none.png" class="l-img"/>
                </div>
                <div class="l-str">~暂无数据~</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {useRouter} from "vue-router";
    import {reactive,onMounted, defineProps} from "vue";
    import { endTask } from "@/request/api";
    import { ElMessageBox,ElMessage } from 'element-plus'
    const state = reactive({

    })
    export default {
        props: {
            type: {
                default: 0
            }
            ,list : {
                default: []
            },
            total: {
                default: 0
            },
            department_id: {
                default: -1
            },
            admin_id: {
                default: 0
            }
        },
        name: "task",
        emits: ['detailurl', 'deletesEnd', 'deleEnd'],
        data: () => ({
            circleUr: ''
        }),
        setup(props,context) {
            if(typeof(props)=='undefined'){
                return false
            }
            const  toUrl = (id,rec_id) => {
                let title = '基础知识任务详情'
                context.emit('detailurl',id,title,rec_id);
            }

            const router = useRouter();
            router.options.isAddDynamicMenuRoutes = false;

            const reject = (id,index) => {
                context.emit('rejecttask',id,index);
            }

            //通过
            const addTask = (id,index) => {
                context.emit('succtask',id,index);
            }
            onMounted(()=>{


            })
            return {
                toUrl,
                state,
                reject,
                addTask
            }
        }
    }
</script>

<style lang="scss" scoped>
    .task {
        display: flex;
        justify-content: space-between;
        padding-bottom: 25px;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 15px;
        .ava {
            margin-right: 20px;
        }
        .title {
            color: #45484D;
            font-weight: 700;
            font-size: 15px;
            margin-bottom: 7px;

        }
        .desc {
            color: #8A9099;
            font-size: 13px;
            padding-top: 5px;
            white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
            overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
            text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
            -o-text-overflow: ellipsis; /* 特定浏览器前缀 */
        }
        .cont {
            width: 60%;
            padding-top: 5px;
            display: flex;
            cursor:pointer;
        }
        .user {
            margin-top: 15px;
            display: flex;
        }
        .jd-user {
            margin-top: 15px;
            margin-left: 1px !important;
            .n5 {
                font-size: 13px;
                color: #8A9099;
                margin-top: 1px;
            }
        }
        .date {
            margin-top: 15px;
            display: flex;
            margin-left: 50px;
        }
        .u-img {
            width: 15px;
            height: 15px;
        }
        .n1 {
            font-size: 13px;
            color: #8A9099;
            margin-top: 1px;
            margin-left: 5px;
        }
        .str {
            font-size: 13px;
            color: #FB9180;
            margin-top: 1px;
            margin-left: 5px;
        }
        .red {
            font-size: 13px;
            color: red;
            margin-top: 1px;
            margin-left: 5px;
        }
        .user-dete {
            display: flex;
        }
        .int-img{
            width: 25px;
            height: 25px;
        }
        .price-cred {
            display: flex;
            margin-top: 8px;
            margin-left: 50px;
        }
        .inte {
            margin-left: 5px;
            color: #5C6066;
            font-size: 13px;
        }
        .buttom {
            margin-top: 22px;
        }
        .lq {
            color: white;
            background: #6C91ED;
            font-size: 12px;
            padding: 10px;
            border-radius: 5px;
            cursor:pointer;
            height: 13px;
            margin-right: 20px;
        }
        .bh {
            color: white;
            background: #fb7f6b;
            font-size: 12px;
            padding: 10px;
            border-radius: 5px;
            cursor:pointer;
            height: 13px;
        }

        .edit {
            color: white;
            background: #0f0f10;
            font-size: 12px;
            padding: 10px;
            border-radius: 5px;
            cursor:pointer;
            height: 13px;
            margin-left: 10px;
        }
        .jx {
            color: #6C91ED;
            background: white;
            font-size: 12px;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0px 2px 6px 0px rgb(110 132 179 / 20%);
            text-align: center;
            height: 13px;
        }
        .js {
            color: #FB9180;
            background: white;
            font-size: 12px;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            height: 13px;
            border: 1px solid #FB9180;
            box-shadow: 0px 2px 6px 0px rgb(110 132 179 / 20%);
        }
        .tg {
            color: #67c23a;
            background: white;
            font-size: 12px;
            padding: 10px;
            border-radius: 5px;
            height: 13px;
            cursor: pointer;
            text-align: center;
            border: 1px solid #67c23a;
            box-shadow: 0px 2px 6px 0px rgb(110 132 179 / 20%);
        }
        .sh {

        }
        .lq:active {
            background: #99a9d0;
        }
        .dfx {
            display: flex;
            justify-content: space-between;
        }
        .jxz {
            color: #6C91ED;
            background: white;
            font-size: 12px;
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 3px;
            text-align: center;
            border:1px solid #6C91ED;
        }
        .tb {
            color: white;
            background: #FB8B79;
            font-size: 12px;
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 3px;
            text-align: center;
            height: 15px;
        }
        .img-ava {
            width: 53px;
            height: 53px;
            border-radius: 50%;
        }

    }
    .list-none {
        text-align: center;
        margin-top: 30px;
        .l-str {
            margin-top: 15px;
            color: #929496;
            font-size: 15px;
        }
        .l-img {
            width: 200px;
        }
    }
</style>
